<template>
  <!-- 主体区域 -->
  <section id="app">
    <!-- 输入框 -->
    <TodoHeader @addTodoName="add"></TodoHeader>
    <!-- 列表区域 -->
    <TodoMain :list="list" @delList="del"></TodoMain>
    <!-- 统计和清空 -->
    <TodoFooter :list="list" @clearList="clear" v-show="list.length>0"></TodoFooter>
  </section>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter  from './components/TodoFooter.vue'
export default {
  data(){
    return{
      list:  JSON.parse(localStorage.getItem('list'))||[
        {id:1,name:'跑步'},
        {id:3,name:'唱跳'}
      ]
    }
  },
  watch:{
  list:{
    deep:true,
    handler(value){
      localStorage.setItem('list',JSON.stringify(value))
    }
  }
  },
  components:{
    TodoFooter,
    TodoHeader,
    TodoMain
  },
  methods:{
    add(value){
     this.list.unshift({
      id:+new  Date(),
      name:value
     })
    },
    del(id){
      this.list=this.list.filter(item=>item.id!==id)
    },
    clear(){
      this.list=[]
    }
  }
};
</script>

<style>
</style>